<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />

    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="daterangepicker.css" />
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <input type="text" name="datefilter" value="" />

    <script src="http://cdn.bootcss.com/angular.js/1.6.6/angular.js"></script>

    <script>
        var app = angular.module("myApp", [])
        app.controller('myCtrl', function($scope, $http, $log) {
            $('input[name="datefilter"]').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ' + picker.endDate.format('YYYY-MM-DD'));
                $scope.startDate = picker.startDate.format('YYYY-MM-DD')
                $scope.endDate = picker.endDate.format('YYYY-MM-DD')
                $log.log($scope.startDate)
                $log.log($scope.endDate)
            });


            $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        })
    </script>
</body>

</html>